<template>
    <div class="ex-footer">
        <img class="logo" src="/images/logo.png" alt="logo">
        <div class="ef-bottom">
            <div class="left">
                <span @click="router.push('/ContactUS')">CONTACT US</span>
                <span @click="router.push('/Privacy')">PRIVACY STATEMENT</span>
                <span @click="router.push('/LegalNotice')">LEGAL NOTICE</span>
                <span>COOKIE SETTINGS</span>
            </div>
            <div class="center">©Copyright 2024 Exeed All Right Reserved.</div>
            <div class="icon">
                <div onclick="window.open('https://www.facebook.com/ExeedGlobal')">
                    <img class="link" src="/images/home/组56@2x.png" alt="" >
                </div>
                <div onclick="window.open('https://www.youtube.com/channel/UCixv_mPjad1ZQQ14z3X93SA')">
                    <img class="link" src="/images/home/组57@2x.png" alt="">
                </div>
                <div onclick="window.open('https://www.instagram.com/exeedglobal/?fbclid=IwAR0PmczWET7aSfiZl30zgsDyOmkUDE-hO4UgSocL4l0Byyt055VRnFP1Y5s')">
                    <img class="link" src="/images/home/组58@2x.png" alt="">
                </div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
    const config = useRuntimeConfig();
    const router = useRouter();
</script>
<style scoped lang="scss">
    .ex-footer {
        position: relative;
        width: 1920px;
        height: 680px;
        background-color: #372E2C;
        bottom: 0px;

        .logo {
            margin-top: 60px;
            margin-left: 130px;
            width: 190px;
        }

        .ef-bottom {
            height: 120px;
            width: 1920px;
            position: absolute;
            left: 0;
            bottom: 0;
            color: rgba(255, 255, 255, 0.45);
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            // padding: 40px 160px 60px 160px;

            span {
                margin-right: 32px;
            }

            img {
                margin: 9px 9px;
                width: 32px;
                height: 32px;
                margin-right: 40px;
            }

            /*img:hover {*/
            /*    background-color: #C78E66;*/
            /*    border-radius: 50%;*/
            /*}*/
        }

        .left {
            margin-left: 170px;

            span {
                cursor: pointer;
            }
        }

        .center {
            margin-left: 190px;
        }

        .icon {

            margin-left: 298px;
            div{
                display: inline-block;
                /*padding: 7px 7px;*/
                width: 50px;
                height: 50px;
                /*height: 100px;*/
                transition: all 0.3s;
                margin-right: 50px;
            }
            div:hover {
                background-color: #C78E66;
                border-radius: 50%;
            }
        }
    }

    .inline {
        display: inline-block;
    }

    .link {
        cursor: pointer;
    }

</style>
